<template>
<div>
    <h4>发表评论</h4>
    <hr>
    <textarea v-model="text"></textarea>
    <mt-button size="large" type="primary" @click="publish">发表评论</mt-button>
    <ul v-for="item in comList">
        <li  v-for="options in item.msg">
            <p class="title">
                <span>第1楼</span>
                <span>用户：匿名用户</span>
                <span>发表时间：2020-1-29 17:46:20</span>
            </p>
            <span class="com">{{options.con}}</span>
        </li>
    </ul>
    <mt-button size="large" type="danger" @click="more">更多</mt-button>
</div>
</template>

<script>
export default {
   props:["com"],
    data(){
        return {
            text:"",
             
        }
    },
    computed:{
        comList(){
            return this.com
        }
        
    },
    methods:{
        more(){
           this.$emit("nextPage")
        },
        publish(){
            this.comList.unshift(
                {
                 "page":1,
                 "id":1,
                 "msg":[
                    {
                    "con":this.text
                    }
                ]
            });
            this.text=""
        },
    }
}
</script>

<style scoped>
    ul{
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 12px;
        padding-top:10px
    }
 
    .title{
        background: #999
    }
    .com{
        padding-left: 12px;
        display: block
    }
    p{
         line-height: 30px;
        margin:0;
        padding:0;
          font-size: 12px;
          color: black
    }
</style>